<template>
  <div>

    <hr style='border: none'>
    <div>
      <el-button size='mini' type='primary' @click='showEditForm("add")' icon='el-icon-plus'>添加</el-button>
      <hr style='border: none'>
      <el-form :inline='true' :model='queryForm.data' class='demo-form-inline'>
        <el-form-item label=''>
          <el-input v-model='queryForm.data.name' placeholder='名称'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click='queryFormSubmit' icon='el-icon-search'>查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <hr>
    <div>
      <el-table :data='tableData' v-loading='loading' style='width: 100%'>
        <el-table-column label='序号' type='index'></el-table-column>
        <el-table-column label='名称' prop='name'></el-table-column>
        <el-table-column label='编码' prop='code'></el-table-column>
        <el-table-column label='地址' prop='homePage'></el-table-column>
        <el-table-column label='是否可用' prop='useable'></el-table-column>
        <!--<el-table-column label='创建者' prop='createBy'></el-table-column>
        <el-table-column label='创建时间' prop='createDate'></el-table-column>
        <el-table-column label='更新者' prop='updateBy'></el-table-column>
        <el-table-column label='更新时间' prop='updateDate'></el-table-column>
        <el-table-column label='备注信息' prop='remarks'></el-table-column>-->
        <el-table-column label='操作' fixed='right' width='200' prop='id'>
          <template slot-scope='scope'>
            <el-button size='mini' type='primary' @click='showEditForm("edit",scope.$index, scope.row)'
                       icon='el-icon-edit'>编辑
            </el-button>
            <el-button size='mini' type='danger' @click='deleteItem(scope.$index, scope.row)'
                       icon='el-icon-delete'>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
                     :current-page='pages.currentPage' :page-sizes='pages.pageSizeList'
                     :page-size='pages.pageSize' layout='total, sizes, prev, pager, next, jumper' :total='pages.total'
                     prev-text='上一页'
                     next-text='下一页' background>
      </el-pagination>
    </div>
    <div>
      <el-dialog :title='editForm.formName' :visible.sync='editForm.dialogFormVisible'>
        <el-form ref='editForm.data' :model='editForm.data' :rules='editForm.rules' label-width='120px'
                 label-position='right'>
          <el-row>
            <el-col :span='12'>
              <el-form-item label='名称' prop='name'>
                <el-input v-model='editForm.data.name' clearable></el-input>
              </el-form-item>
              <el-form-item label='地址' prop='homePage'>
                <el-input v-model='editForm.data.homePage' clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label='编码' prop='code'>
                <el-input v-model='editForm.data.code' clearable></el-input>
              </el-form-item>

              <el-form-item label='是否可用' prop='useable'>
                <el-select v-model='editForm.data.useable' placeholder='请选择' style='width: 100%'>
                  <el-option v-for='item in options.yesno'
                             :key='item.id'
                             :label='item.text'
                             :value='item.id'>

                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <!--<el-form-item label='创建者' prop='createBy'>
              <el-input v-model='editForm.data.createBy' clearable></el-input>
          </el-form-item>
          <el-form-item label='创建时间' prop='createDate'>
              <el-input v-model='editForm.data.createDate' clearable></el-input>
          </el-form-item>
          <el-form-item label='更新者' prop='updateBy'>
              <el-input v-model='editForm.data.updateBy' clearable></el-input>
          </el-form-item>
          <el-form-item label='更新时间' prop='updateDate'>
              <el-input v-model='editForm.data.updateDate' clearable></el-input>
          </el-form-item>
          <el-form-item label='备注信息' prop='remarks'>
              <el-input v-model='editForm.data.remarks' clearable></el-input>
          </el-form-item>-->
          <input type='hidden' v-model='editForm.data.id'>
        </el-form>
        <div slot='footer' class='dialog-footer'>
          <el-button @click='editForm.dialogFormVisible = false'>取 消</el-button>
          <el-button type='primary' @click='save("editForm.data")'>保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'sys-domain-list',
    data() {
      return {
        loading: false,
        url: {
          queryPage: '/datacenter/com/lizhivscaomei/jes/sys/controller/sysDomain/query/page',
          save: '/datacenter/com/lizhivscaomei/jes/sys/controller/sysDomain/save',
          delete: '/datacenter/com/lizhivscaomei/jes/sys/controller/sysDomain/delete',
          detail: '/datacenter/com/lizhivscaomei/jes/sys/controller/sysDomain/query/detail',
          domainOptions: '/datacenter/com/lizhivscaomei/jes/sys/controller/sysDomain/query/spinner'
        },
        pages: {
          total: 0,
          currentPage: 1,
          pageSize: 20,
          pageSizeList: [20, 40, 100]
        },
        tableData: [],
        editForm: {
          formName: '域',
          dialogFormVisible: false,
          data: {
            //  名称
            name: '',
            // 编码
            code: '',
            // 地址
            homePage: '',
            useable: '',
            id: ''
          },
          rules: {
            name: [{required: true, message: '请输入名称', trigger: 'blur'}],
            code: [{required: true, message: '请输入编码', trigger: 'blur'}],
            homePage: [{required: true, message: '请输入地址', trigger: 'blur'}],
            useable: [{required: true, message: '请输入是否可用', trigger: 'blur'}]
          }
        },
        queryForm: {
          dialogFormVisible: false,
          data: {
            currentPage: 1,
            pageSize: 10,
            // 名称
            name: '',
            // 编码
            code: '',
            // 地址
            homePage: '',
            // 是否可用
            useable: ''
//                     // 创建者
//                     createBy: '',
//                     // 创建时间
//                     createDate: '',
//                     // 更新者
//                     updateBy: '',
//                     // 更新时间
//                     updateDate: '',
//                     // 备注信息
//                     remarks: '',
//                     id: ''
          }
        },
        options: {
          domainId: [],
          yesno: [
            {
              'id': '1',
              'text': '是'
            }, {
              'id': '0',
              'text': '否'
            }
          ]
        }
      }
    },
    methods: {
      handleSizeChange: function (val) {
        this.queryFormSubmit()
      },
      handleCurrentChange: function (val) {
        this.queryFormSubmit()
      },
      queryFormSubmit: function () {
        this.loading = true
        this.queryForm.data.currentPage = this.pages.currentPage
        this.queryForm.data.pageSize = this.pages.pageSize
        this.$http.get(this.$http.adornUrl(this.url.queryPage), {params: this.queryForm.data}).then((res) => {
          if (res.data.success) {
            this.loading = false
            this.tableData = res.data.data.list
            this.pages.total = res.data.data.total
          } else {
            this.$message({
              type: 'error',
              message: res.data.info
            })
          }
        }, (res) => {
          this.loading = false
          this.$message({
            showClose: true,
            message: '网络错误,code=' + res.status,
            type: 'error'
          })
        })
      },
      showEditForm: function (action, index, row) {
        if (action === 'add') {
          this.editForm.data.id = ''
          this.editForm.data.useable = '1'
        }
        if (action === 'edit') {
          this.editForm.data.id = row.id
          this.editForm.data.name = row.name
          this.editForm.data.code = row.code
          this.editForm.data.homePage = row.homePage
          this.editForm.data.useable = row.useable
        }
        this.editForm.dialogFormVisible = true
      },
      deleteItem: function (index, row) {
        this.$confirm('此操作将删除' + row.name + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(this.$http.adornUrl(this.url.delete), {params: {id: row.id}}).then((res)=> {
            if (res.data.success) {
              this.queryFormSubmit()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.data.info
              })
            }
          },  (res) => {
            this.$message({
              showClose: true,
              message: '网络错误' + res.status,
              type: 'error'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      save: function (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(this.url.save),
              method: 'post',
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
              },
              data: this.$http.adornData(this.editForm.data, false, 'form')
            }).then((res) => {
              if (res.data.success) {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                })
                this.editForm.dialogFormVisible = false
                this.queryFormSubmit()
              } else {
                this.$message({
                  type: 'error',
                  message: res.data.info
                })
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    mounted: function () {
      this.queryFormSubmit()
    }
  }
</script>

<style scoped>

</style>
